// 导出页面为PDF格式
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
import printJS from 'print-js'
export default {
  install(Vue, options) {
    ;(Vue.prototype.htmlToPdf = (elementId, title = '导出PDF') => {
      // 特别重要：当页面超过一页，出现滚动条，滚动的部分生成的图片为空白
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0

      let url = html2canvas(document.getElementById(elementId), {
        backgroundColor: 'white',
        useCORS: true,
        scale: 1,
        height: document.getElementById(elementId).scrollHeight,
        windowHeight: document.getElementById(elementId).scrollHeight
      }).then(function(canvas) {
        var contentWidth = canvas.width
        var contentHeight = canvas.height

        // 一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89
        // 未生成pdf的html页面高度
        var leftHeight = contentHeight
        // 页面偏移
        var position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28
        var imgHeight = (592.28 / contentWidth) * contentHeight

        var pageData = canvas.toDataURL('image/jpeg', 1.0)

        var pdf = new JsPDF('', 'pt', 'a4')

        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage()
            }
          }
        }
        // 下载pdf
        pdf.save(title + '.pdf')
        // 输出base64字符串
        return pdf.output('datauristring')
      })
      return url
    }),
      (Vue.prototype.htmlToImg = function(elementId, printName = '导出图', img2Pdf = false) {
        // dpi : 表示导出图片的清晰度，数值越高清晰度越高
        // 这里说的其实不是很详细，详细可以去这个博客看看【https://blog.csdn.net/weixin_41863239/article/details/85248545】
        html2canvas(document.getElementById(elementId), {
          backgroundColor: 'white',
          useCORS: true,
          scale: 1,
          height: document.getElementById(elementId).scrollHeight,
          windowHeight: document.getElementById(elementId).scrollHeight
        }).then(canvas => {
          // 将图片转化成base64字符串
          var imgUrl = canvas.toDataURL('image/png')
          // img2Pdf为true，转化成PDF
          if (img2Pdf) {
            getImgSize(imgUrl).then(res => {
              // 实例化一个PDF对象，三个参数分别是
              // 1.排列方式  2.像素单位  3.[宽,高]
              var pdf = new JsPDF('landscape', 'pt', [res.width, res.height])
              // 将图片转化为dataUrl
              pdf.addImage(imgUrl, 'PNG', 0, 0, res.width, res.height)
              // 下载保存PDF，参数是下载下来的文件名
              pdf.save(`${printName}.pdf`)
            })
            return
          }
          if (!img2Pdf) {
            // 创建一个a标签，用来下载图片
            var eleLink = document.createElement('a')
            // 转换后的图片地址
            eleLink.href = imgUrl
            // 文件名设置
            eleLink.download = printName
            // 下载
            eleLink.click()
            return
          }
        })
      }),
      (Vue.prototype.printHtml = function(elementId) {
        // dpi : 表示导出图片的清晰度，数值越高清晰度越高
        // 这里说的其实不是很详细，详细可以去这个博客看看【https://blog.csdn.net/weixin_41863239/article/details/85248545】
        html2canvas(document.getElementById(elementId), {
          backgroundColor: 'white',
          useCORS: true,
          scale: 1,
          height: document.getElementById(elementId).scrollHeight,
          windowHeight: document.getElementById(elementId).scrollHeight
        }).then(canvas => {
          const url = canvas.toDataURL()
          this.img = url
          printJS({
            printable: url,
            type: 'image',
            documentTitle: ''
          })
        })
      })
  }
}
// TODO: img.onload本质是一个异步函数，必须等这个异步函数执行完成后，才能执行其他函数
function getImgSize(imgUrl) {
  // img.onload本质是一个异步函数，必须等这个异步函数执行完成后，才能获取他的宽高
  // 否则极有可能获取undefined，这里非常坑
  return new Promise(resolve => {
    // 创建一个img元素
    var imgTemp = document.createElement('img')
    // 赋值
    imgTemp.src = imgUrl
    // img.onload函数，定义图片加载完成后的函数，只有图片加载完成后才能拿到他的宽高，要不然也都是undefined
    imgTemp.onload = () => {
      // 定义图片对象，保存宽高
      let imgObj = {
        width: imgTemp.width,
        height: imgTemp.height
      }
      // 返回宽高
      resolve(imgObj)
    }
  })
}
